<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品首页</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <!--<span>商品名称：</span>
    <div style="width: 300px">
        <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="inputsearch">
        </el-input>
    </div>
    <el-button type="primary" @click="search()" round>搜索</el-button>
    <hr>
    <br>
    <br>
    &lt;!&ndash; 添加按钮 &ndash;&gt;
    <el-button type="primary" @click="addDialog">添加商品</el-button>
    <hr>
    <br>
    <br>
    &lt;!&ndash;下拉框，自主选择每页的行数&ndash;&gt;
    <div class="layui-form-item">
        <div class="layui-input-block">
            <label class="layui-form-label">每页显示条数:</label>
            <select name="size" v-model="size" v-on:click="selectSize()" lay-verify="required">
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="10">10</option>
            </select>
        </div>
    </div>-->
    <div style="width: 100%">
        <el-form label-width="130px">
            <div style="width: 400px">
                <el-form-item label="请输入内容：">
                    <el-input v-model="inputsearch"
                              placeholder="请输入内容"
                              clearable
                    >
                        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-input>
                </el-form-item>
            </div>
            <hr style="width: 100%">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="primary" @click="addDialog">添加商品</el-button>
            <hr style="width: 100%">
            <div style="width: 400px">
                <el-form-item label="选择页面条数：">
                    <el-dropdown @command="selectSize">
                        <el-button type="primary">
                            {{size}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="3">3</el-dropdown-item>
                            <el-dropdown-item command="5">5</el-dropdown-item>
                            <el-dropdown-item command="10">10</el-dropdown-item>
                            <el-dropdown-item command="20">20</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <!--添加或修改角色弹框-->
    <el-dialog :visible.sync="dialogFormVisible" @close="closeKK">
        <el-form :model="form">
            <el-form-item label="剩余数量" :label-width="formLabelWidth">
                <el-input v-model="form.pnumber" autocomplete="off" clearable placeholder="请输入剩余数量"></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="form.pname" autocomplete="off" clearable placeholder="请输入商品名称"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="商品图片" :label-width="formLabelWidth">
                <!--:with-credentials='false' 身份认证关闭-->
                <el-upload
                        class="avatar-uploader"
                        action="/up/upload"
                        :show-file-list="false"
                        :with-credentials='false'
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="form.pimg" :src="'http://121.5.226.17/images/'+form.pimg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="form.pprice" autocomplete="off" clearable placeholder="请输入商品价格"></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="form">
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="form.penterprise" autocomplete="off" clearable placeholder="请输入分类"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <!--<el-form-item label="添加时间" :label-width="formLabelWidth">
                <el-input v-model="form.paddtime" autocomplete="off" clearable></el-input>
            </el-form-item>-->
            <el-form-item label="添加时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="value2"
                        type="datetime"
                        placeholder="选择日期时间"
                        align="right"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>

        </el-form>
        <el-form :model="form">
            <el-form-item label="申请状态" :label-width="formLabelWidth">
                <el-input v-model="form.astatus" autocomplete="off" clearable placeholder="请输入申请状态"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="公司id" :label-width="formLabelWidth">
                <el-input v-model="form.companyid" autocomplete="off" clearable placeholder="请输入公司id"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="产地" :label-width="formLabelWidth">
                <el-input v-model="form.plocal" autocomplete="off" clearable placeholder="请输入产地"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="保质期" :label-width="formLabelWidth">
                <el-input v-model="form.pshelflife" autocomplete="off" clearable placeholder="请输入保质期"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="材质" :label-width="formLabelWidth">
                <el-input v-model="form.pmaterial" autocomplete="off" clearable placeholder="请输入材质"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="品牌" :label-width="formLabelWidth">
                <el-input v-model="form.pbrand" autocomplete="off" clearable placeholder="请输入品牌"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="商品质量" :label-width="formLabelWidth">
                <el-input v-model="form.pquality" autocomplete="off" clearable placeholder="请输入商品质量"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="商品种类" :label-width="formLabelWidth">
                <el-input v-model="form.pkind" autocomplete="off" clearable placeholder="请输入商品种类"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.premarks" autocomplete="off" clearable placeholder="请添加备注"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveProduct">确 定</el-button>
        </div>
    </el-dialog>

    <!--商品详情弹框-->
    <el-dialog :visible.sync="dialogFormDetailsVisible" @close="closeK">
        <el-form :model="product">
            <el-form-item label="剩余数量" :label-width="formLabelWidth">
                <el-input v-model="product.pnumber" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="product">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="product.pname" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="商品图片" :label-width="formLabelWidth">
                <!--:with-credentials='false' 身份认证关闭-->
                <el-upload
                        class="avatar-uploader"
                        action="/up/upload"
                        :show-file-list="false"
                        :with-credentials='false'
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="product.pimg" :src="'http://121.5.226.17/images/'+product.pimg" :disabled="true" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>

        <el-form :model="product">
            <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="product.pprice" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>

        <el-form :model="product">
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="product.penterprise" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="添加时间" :label-width="formLabelWidth">
                <el-input v-model="product.paddtime" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="申请状态" :label-width="formLabelWidth">
                <el-input v-model="product.astatus" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="公司id" :label-width="formLabelWidth">
                <el-input v-model="product.companyid" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="产地" :label-width="formLabelWidth">
                <el-input v-model="product.plocal" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="保质期" :label-width="formLabelWidth">
                <el-input v-model="product.pshelflife" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="材质" :label-width="formLabelWidth">
                <el-input v-model="product.pmaterial" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="品牌" :label-width="formLabelWidth">
                <el-input v-model="product.pbrand" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="商品质量" :label-width="formLabelWidth">
                <el-input v-model="product.pquality" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="商品种类" :label-width="formLabelWidth">
                <el-input v-model="product.pkind" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="product">
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="product.premarks" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormDetailsVisible = false">确 定</el-button>
        </div>
    </el-dialog>


    <!--表格数据-->
    <el-table
            ref="productTable"
            :data="products"
            style="width: 100%">
        <el-table-column label="商品编号" show-overflow-tooltip width="50px">
            <template slot-scope="scope">
                <span >{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="剩余数量" width="50px">
            <template slot-scope="scope">
                <span>{{ scope.row.pnumber }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品名称" width="100px">
            <template slot-scope="scope">
                <span>{{ scope.row.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品图片">
            <template slot-scope="scope">
                <span style="margin-left: 10px">
                    <img :src="'http://121.5.226.17/images/'+scope.row.pimg"
                         width="50px" height="50px" style="border-radius: 50%">
                </span>
            </template>
        </el-table-column>
        <el-table-column label="商品价格">
            <template slot-scope="scope">
                <span>{{ scope.row.pprice }}</span>
            </template>
        </el-table-column>
        <el-table-column label="类别(企业)" show-overflow-tooltip width="50px">
            <template slot-scope="scope">
                <span>{{ scope.row.penterprise }}</span>
            </template>
        </el-table-column>
        <el-table-column label="添加时间" show-overflow-tooltip width="50px">
            <template slot-scope="scope">
            <span>{{ scope.row.paddtime }}</span>
        </template>
        </el-table-column>

        <el-table-column label="审核状态" width="80px">
            <template slot-scope="scope">
                <span v-if="scope.row.astatus==1">通过</span>
                <span v-else>待审核</span>

            </template>
        </el-table-column>
        <el-table-column label="商品状态" width="100px">
            <template slot-scope="scope">
                <!--<span v-if="scope.row.pstatus==1">已上架</span>
                <span v-if="scope.row.pstatus==-1">已下架</span>-->
                <span v-if="scope.row.pstatus==1">
                    <el-button type="success" v-on:click="productpstatus(scope.$index, scope.row)" plain>已上架</el-button>
                </span>
                <span v-if="scope.row.pstatus==-1">
                    <el-button type="info" v-on:click="productpstatus(scope.$index, scope.row)" plain>已下架</el-button>
                </span>
            </template>
        </el-table-column>
        <el-table-column label="公司id" width="50px">
            <template slot-scope="scope">
                <span>{{ scope.row.companyid }}</span>
            </template>
        </el-table-column>


        <el-table-column label="产地" width="80px">
            <template slot-scope="scope">
                <span>{{ scope.row.plocal }}</span>
            </template>
        </el-table-column>
        <el-table-column label="保质期" width="80px">
            <template slot-scope="scope">
                <span>{{ scope.row.pshelflife }}</span>
            </template>
        </el-table-column>
        <el-table-column label="材质" width="80px">
            <template slot-scope="scope">
                <span>{{ scope.row.pmaterial }}</span>
            </template>
        </el-table-column>
        <el-table-column label="品牌" width="80px">
            <template slot-scope="scope">
                <span>{{ scope.row.pbrand }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品质量" width="80px">
            <template slot-scope="scope">
                <span>{{ scope.row.pquality }}</span>
            </template>
        </el-table-column>
        <el-table-column label="商品种类" width="100px">
            <template slot-scope="scope">
                <span>{{ scope.row.pkind }}</span>
            </template>
        </el-table-column>
        <el-table-column label="备注" width="80px">
            <template slot-scope="scope">
                <span>{{ scope.row.premarks }}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        @click="handleDetails(scope.$index, scope.row)">详情</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="nowcurrent"
            :page-size="size"
            @current-change="loadProductPage">
    </el-pagination>

</div>
<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
</body>
<script>
    new Vue({
        el:"#app",
        data(product){
            //返回值
            return{
                products:null,
                total:0,
                //分页
                total: 0, //数据总条数
                nowcurrent: 1, //当前页
                size: 5, //每页
                inputsearch: '',//搜索输入的内容
                dialogFormVisible: false,
                dialogFormDetailsVisible:false,
                formLabelWidth: '120px',//条数
                form:{
                    id:'', pnumber:'', pname:'', pimg:'', pprice:'',
                    penterprise:'', paddtime:'', astatus:'',
                    companyid:'', plocal:'', pshelflife:'', pmaterial:'',
                    pbrand:'', pquality:'', pkind:'', premarks:''
                },
                product:{
                    id:'', pnumber:'', pname:'', pimg:'', pprice:'',
                    penterprise:'', paddtime:'', astatus:'',
                    companyid:'', plocal:'', pshelflife:'', pmaterial:'',
                    pbrand:'', pquality:'', pkind:'', premarks:''
                },
                //选择时间
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
                value3: ''
            }
        },
        methods:{
            //打开对话框
            addDialog(){
                this.dialogFormVisible = true;
            },
            //显示修改商品的对话框
            handleEdit(index, row) {
                this.form = row;
                this.dialogFormVisible = true;
            },
            //商品详情
            handleDetails(index, row){
                this.product = row;
                this.dialogFormDetailsVisible = true;
            },
            //删除
            handleDelete(index, row) {
                axios.delete("/product/"+row.id).then(value => {
                    if (value.data.state == 1){
                        if (this.inputsearch.length!=0){
                            this.search(this.nowcurrent);
                        }else {
                            this.loadProductPage(this.nowcurrent);
                        }
                    }
                })
            },
            //模糊查询，搜索
            search(nowcurrent){
                console.log(this.inputsearch)
                axios.get("/productsearchlike/"+this.inputsearch+"/"+this.nowcurrent+"/"+this.size).then(value => {
                    console.log("进来了")
                    if (value.data.state == 1){
                        console.log("进来了")
                        console.log(value.data.data.records)
                        this.products = value.data.data.records;
                        this.nowcurrent = value.data.data.current;
                        this.total = value.data.data.total;
                        this.size = value.data.data.size;
                    }
                })

            },
            //确定提交订单
            saveProduct(){
                if (this.form.id==''){  //添加
                    axios.post("/product",this.form).then(value => {
                        if (value.data.state == 1){
                            this.loadProductPage(this.nowcurrent);
                        }
                    })
                }else {//修改
                    axios.put("/product",this.form).then(value => {
                        if (value.data.state == 1){
                            if (this.inputsearch.length!=0){
                                this.search(this.nowcurrent);
                            }else {
                                this.loadProductPage(this.nowcurrent);
                            }
                        }
                    })
                }
                //关闭弹框
                this.dialogFormVisible=false;
            },
            //关闭弹框清除form数据
            closeKK(){
                this.form={
                    id:'', pnumber:'', pname:'', pimg:'', pprice:'',
                    penterprise:'', paddtime:'', astatus:'',
                    companyid:'', plocal:'', pshelflife:'', pmaterial:'',
                    pbrand:'', pquality:'', pkind:'', premarks:''
                }
            },
            closeK(){
                this.product={
                    id:'', pnumber:'', pname:'', pimg:'', pprice:'',
                    penterprise:'', paddtime:'', astatus:'',
                    companyid:'', plocal:'', pshelflife:'', pmaterial:'',
                    pbrand:'', pquality:'', pkind:'', premarks:''
                }
            },

            /*图片上传回显*/
            handleAvatarSuccess(res,file){
                console.log(res)
                this.form.pimg = res.message;
                //this.imageUrl = URL.createObjectURL(file.raw);
            },
            //图片上传之前检测大小格式
            beforeAvatarUpload(file){
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //自主选择每页的条数
            selectSize(size){
                this.size=parseInt(size);
                if (this.inputsearch.length!=0){
                    this.search(1);
                }else {
                    this.loadProductPage(1);
                }
            },
            //商品状态
            productpstatus:function(index,row){
                if (row.pstatus==1){
                    alert("确认要下架吗？")
                    row.pstatus=-1;
                    console.log(this.row)
                    this.row.pstatus = row.pstatus
                    console.log(this.row.pstatus)
                    axios.put("/product",this.row).then(value => {
                        if (value.data.state == 1){
                            if (this.inputsearch.length!=0){
                                this.search(this.nowcurrent);
                            }else {
                                this.loadProductPage(this.nowcurrent);
                            }
                        }
                    })
                }else {
                    alert("确认要上架吗？")
                    row.pstatus=1;
                    console.log(this.row)
                    this.row.pstatus = row.pstatus
                    console.log(this.row.pstatus)
                    axios.put("/product",this.row).then(value => {
                        if (value.data.state == 1){
                            if (this.inputsearch.length!=0){
                                this.search(this.nowcurrent);
                            }else {
                                this.loadProductPage(this.nowcurrent);
                            }
                        }
                    })
                }

            },
            //分页查询商品
            loadProductPage(nowcurrent){
                this.nowcurrent = nowcurrent;
                axios.get("/products/"+nowcurrent+"/"+this.size).then(value => {
                    console.log(value);
                    if (value.data.state == 1){
                        this.products = value.data.data.records;
                        this.nowcurrent = value.data.data.current;
                        this.total = value.data.data.total;
                        this.size = value.data.data.size;
                    }
                })
            }
        },
        //钩子函数
        mounted(){
            this.loadProductPage(1);
        }

    })

</script>
</html>